<template>
    <div class="exam-box">
        <div class="exam-head">
            <el-form class="exam-head-form">
                <div class="head">
                    <div class="head-title" v-if="route.name == 'examPaper'">试卷库</div>
                    <div class="head-title" v-if="route.name == 'createExam'">请选择一张试卷</div>
                    <el-button type="primary" class="head-btn"
                        v-if="route.name == 'createExam' && examPaperId.length > 0" @click="nextStep(examPaperId)"><i
                            class="iconfont icon-xiayibu"></i>下一步</el-button>
                </div>

                <div class="head-content">
                    <div class="head-content-left">
                        <el-form-item>
                            <el-select v-model="quesHeadData.belongCourseId" class="select" placeholder="请选择课程">
                                <el-option v-for="course in quesHeadData.courses" :label="course.label"
                                    :value="course.value" @click="getExamPaperByCourseId(course.value)" />
                            </el-select>
                        </el-form-item>
                        <div class="btns" v-if="route.name == 'examPaper'">
                            <el-button type="primary" @click="createExamPaper" plain><i
                                    class="iconfont icon-tianjia"></i>
                                创建试卷</el-button>
                            <el-button type="success" plain v-show="!isCardActive"
                                @click="operationExamPaper">批量操作</el-button>
                            <el-button type="danger" plain @click="deletesExamPaper" v-show="isCardActive"><i
                                    class="iconfont icon-shanchu"></i>删除</el-button>
                        </div>

                    </div>
                    <div class="head-content-right">
                        <el-input v-model="search" placeholder="请输入题目" class="input">
                            <template #append>
                                <el-button class="iconfont icon-sousuo3"></el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="exam-body">
            <div v-show="examPaperData.length >= 1" class="content" :class="{ contentActive: contentActive }">
                <el-card shadow="hover" v-for="(examPaper, index) in examPaperData" :key="examPaper.epId"
                    :class="{ active: isCardActive === true }">
                    <el-checkbox v-show="isCardActive" @change="selectCheckbox(examPaper.epId)" :value="examPaper.epId"
                        class="checkbox" />
                    <div class="card-m1">
                        <div class="card-name">{{ examPaper.epName }}</div>
                        <div class="m1-right">
                            <!-- <span><span class="num">1</span>大题</span><span class="spancing">|</span> -->
                            <span><span class="num">{{ examPaper.epQuestionNumber }}</span>道题</span><span
                                class="spancing">|</span>
                            <span>总分<span class="num">{{ examPaper.epScore }}</span></span><span
                                class="spancing">|</span>
                            <span>应用考试<span class="num total">0</span>场</span>
                        </div>
                    </div>
                    <div class="card-m2">所属课程：<span>{{ examPaper.belongCourseId }}</span></div>
                    <div class="card-m3">
                        <div class="m3-left">
                            <div class="name-row">创建人: <div v-if="examPaper.creator" class="name">{{ examPaper.creator
                                    }}</div>
                                <div v-if="!examPaper.creator" class="name">暂无数据</div>
                            </div>
                            <span class="spancing">|</span>
                            <div class="card-time">创建于：<span>{{ examPaper.createTime }}</span></div>
                        </div>
                        <div class="m3-right">
                            <div class="m3-word" @click="watchExamDetail(examPaper.epId)"><i
                                    class="iconfont icon-zhengyanicon svg"></i><span class="words">预览</span>
                            </div>
                            <div class="m3-right-hidden" v-if="route.name == 'examPaper'">
                                <div class="m3-word" @click="editExamPaper(examPaper.epId)"><i class="iconfont icon-bianji"></i><span class="words">编辑</span>
                                </div>
                                <div class="m3-word" @click="toCreateExam(examPaper.epId)"><i class="iconfont icon-tianjia1"></i><span
                                        class="words">创建考试</span>
                                </div>
                                <el-popconfirm width="120" confirm-button-text="确认" cancel-button-text="取消"
                                    @confirm="deleteExamPaper(examPaper.epId)" title="确认删除?">
                                    <template #reference>
                                        <div class="m3-word"><i class="iconfont icon-shanchu"></i><span
                                                class="words">删除</span>
                                        </div>
                                    </template>
                                </el-popconfirm>
                            </div>

                        </div>
                    </div>
                </el-card>
            </div>
            <div class="content" :class="{ contentActive: contentActive }" v-show="examPaperData.length < 1"><el-empty
                    :image-size="200" description="暂无数据" />
            </div>
            <div class="exam-footer">
                <div class="question-foot">
                    <el-pagination v-model:current-page="paginationData.pageNum"
                        v-model:page-size="paginationData.pageSize" :page-sizes="[20, 50, 100]"
                        :small="paginationData.small" layout="sizes, prev, pager, next"
                        :total="Number(paginationData.total)" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" class="pagination" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, } from 'vue';
import { getCourseListAPI, getExamPaperByCourseIdAPI, getCourseByIdAPI, deleteExamPaperAPI } from '@/api/api'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
import { defineEmits } from 'vue'

const router = useRouter()
const route = useRoute()

const search = ref('')
const isCardActive = ref(false)

const examPaperId = ref([])
const contentActive = ref(false)

const examPaperData = ref([])
const quesHeadData = ref({
    //题目类型
    quesType: '',
    //所属课程
    belongCourseId: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
})
//试卷分页
const paginationData = reactive({
    pageSize: 20,
    total: 0,
    pageNum: 1,
    background: false,
    disabled: false,
    small: '',
})

const emit = defineEmits(['emitNextStep'])
//点击下一步(子组件触发父组件)
const nextStep = (examPaperId) => {
    emit('emitNextStep')
    router.push({
        path:'/adminHome/createExam',
        query:{
            examPaperId:examPaperId
        }
    })
}
onMounted(() => {
    //获取课程信息
    getCourseList()
    if (route.name == 'createExam') {
        contentActive.value = true
        isCardActive.value = true
    }
})
//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            quesHeadData.value.courseList = res.data.data.list
            getCourseName(quesHeadData.value.courseList)
            if (sessionStorage.getItem('examPaperCourseId')) {
                getExamPaperByCourseId(sessionStorage.getItem('examPaperCourseId'))
                getCourseById(sessionStorage.getItem('examPaperCourseId'))
            }
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        quesHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程id查询课程名（单查）
const getCourseById = async (id) => {
    await getCourseByIdAPI(id).then(res => {
        quesHeadData.value.belongCourseId = res.data.data.courseName
    })
}
//根据课程多查试卷
const getExamPaperByCourseId = async (id) => {
    sessionStorage.setItem('examPaperCourseId', id)
    getCourseById(sessionStorage.getItem('examPaperCourseId'))
    await getExamPaperByCourseIdAPI(id, paginationData.pageNum, paginationData.pageSize).then(res => {
        if (res.status == 200) {
            console.log(res.data.data);
            paginationData.total = res.data.data.total
            for (let item of res.data.data.list) {
                item.belongCourseId = quesHeadData.value.belongCourseId
            }
            examPaperData.value = res.data.data.list
            console.log(examPaperData.value, 'examPaperData.value');
        }
    })
}
//当一页的数量改变
const handleSizeChange = (newPageSize) => {
    paginationData.pageSize = newPageSize
    getExamPaperByCourseId(sessionStorage.getItem('examPaperCourseId'))
}
//第几页
const handleCurrentChange = (newCurrentPage) => {
    paginationData.pageNum = newCurrentPage
    getExamPaperByCourseId(sessionStorage.getItem('examPaperCourseId'))
}
//创建试卷按钮
const createExamPaper = () => {
    router.push({
        name: 'createExamPaper'
    })
}
//操作按钮
const operationExamPaper = () => {
    isCardActive.value = true
}
//多选框改变事件
const selectCheckbox = (id) => {
    if (event.target.checked) {
        examPaperId.value.push(id)
    } else {
        examPaperId.value.splice(examPaperId.value.indexOf(id), 1)
    }
}
//删除按钮(可多删)
const deletesExamPaper = async () => {
    isCardActive.value = false
    const ids = {
        ids: examPaperId.value
    }
    console.log(ids, 'ids');
    await deleteExamPaperAPI(ids).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('删除成功')
            getExamPaperByCourseId(sessionStorage.getItem('examPaperCourseId'))
        }

    })
}
//单独删除
const deleteExamPaper = async (id) => {
    const ids = {
        ids: [id]
    }
    await deleteExamPaperAPI(ids).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('删除成功')
            getExamPaperByCourseId(sessionStorage.getItem('examPaperCourseId'))
        }
    })
}
//预览试卷
const watchExamDetail = (epId) => {
    router.push({
        name: 'examPaperDetail',
        query: {
            epId: epId
        }
    })
}
//编辑试卷按钮
const editExamPaper = (epId)=>{
    router.push({
        path:'/adminHome/createExamPaper',
        query:{
            epId:epId
        }
    })
}
//创建考试按钮
const toCreateExam = (examPaperId)=>{
    router.push({
        path:'/adminHome/createExam',
        query:{
            examPaperId:examPaperId
        }
    })
}




</script>

<style lang="less" scoped>
.exam-box {
    padding: 0;
    margin: 15px 0px 0 0;
    background-color: #fff;
    // border-radius: 15px;

    .exam-head {
        min-height: 120px;
        background-color: #ffffff;
        border-radius: 15px;

        .exam-head-form {
            border-radius: 15px;
            padding-bottom: 5px;

            .head {
                display: flex;
                justify-content: space-between;

                .head-title {
                    font-size: 18px;
                    font-weight: 550;
                    color: grey;
                    padding: 15px 10px;
                }

                .head-btn {
                    margin: 15px 25px;

                }
            }



            .head-content {
                display: flex;
                justify-content: space-between;
                padding: 10px 25px 0 25px;

                .head-content-left {
                    display: flex;

                    .word {
                        padding: 0 5px;
                        font-size: 15px;
                    }

                    el-form-item {
                        padding: 0;
                        margin: 0;
                    }

                    .select {
                        width: 150px;
                        margin-right: 15px;
                    }

                    .btn {
                        border-radius: 23px;
                    }
                }

                .head-content-right {
                    display: flex;
                    height: 34px;

                    .icon-sousuo3:hover {
                        cursor: pointer;
                    }

                    // ::v-deep .el-input__wrapper {
                    //     border-radius: 23px;
                    // }
                }
            }
        }
    }

    .exam-body {
        padding: 0 15px;


        .content {
            display: block;
            max-height: 64vh;
            min-height: 64vh;
            overflow-y: scroll;

            .el-card {
                background-color: #f5f7fa;
                max-width: 1250px;
                min-height: 90px;
                margin: 5px auto 15px auto;
                border: #ffffff;
                position: relative;
                transform: scale(1);
                // padding: 10px 15px;

                .checkbox {
                    position: fixed;
                    top: 30px;
                    left: 10px;
                    zoom: 130%;
                }

                .radio {
                    position: fixed;
                    top: 30px;
                    left: 10px;
                    zoom: 130%;
                }


                .card-m1 {
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: space-between;

                    .card-name {
                        font-size: 18px;
                        font-weight: 600;
                        display: flex;


                    }

                    .m1-right {
                        .num {
                            padding: 0 5px;
                        }

                        .total {
                            color: #409eff;
                        }

                        .spancing {
                            padding: 0 10px;
                        }
                    }
                }

                .card-m2 {
                    margin-bottom: 10px;
                    display: flex;
                }

                .card-m3 {
                    display: flex;
                    justify-content: space-between;

                    .m3-left {
                        display: flex;

                        .spancing {
                            padding: 0 10px;
                        }

                        .name-row {
                            display: flex;

                            .name {
                                color: grey;
                                margin-left: 2px;
                            }
                        }

                    }

                    .m3-right {
                        display: flex;

                        .m3-right-hidden {
                            display: flex;
                        }

                        .m3-word {
                            margin: 0 5px;
                            padding: 2px;

                            .iconfont {
                                color: #409eff;
                            }

                            .words {
                                padding: 0 3px;
                            }
                        }

                        .m3-word:hover {
                            background-color: #deeefb;
                            cursor: pointer;

                        }
                    }

                }
            }

            .active {
                padding-left: 25px;
            }

        }

        .contentActive {
            max-height: 56vh;
            min-height: 56vh;
        }

        .exam-footer {
            overflow: hidden;
            display: flex;
            justify-content: center;

            .question-foot {
                display: flex;
                justify-content: center;

                .pagination {
                    margin: 10px 0;

                }

            }
        }
    }

}
</style>